<template>
  <div id="main-content" v-loading="loading" element-loading-text="加载中...">
    <div class="content">
      <el-page-header @back="goBackToList" title="返回列表" content="资讯信息"></el-page-header>
      <div class="toolBar">
        <el-button type="primary" @click="saveNewsInfo()" :loading="submitLoading">保存</el-button>
      </div>
      <el-form ref="form" :model="form" label-width="120px">
        <el-form-item label="标题">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="标题图片">
          <el-image
            v-if="form.titleImgUrl"
            style="width: 100px; height: 100px"
            :src="form.titleImgUrl"
            fit="contain"
            @click="handlePictureCardPreview(form.titleImgUrl)"
          ></el-image>
          <el-upload
            class="upload-demo"
            ref="upload"
            :action="uploadImgAction"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :limit="1"
            :file-list="fileList"
            list-type="text"
            :on-success="(res,file)=>uploadImgSuccess(res,index)"
          >
            <el-button slot="trigger" size="small" type="primary">选取图片</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="关键字">
          <el-input v-model="form.keywords"></el-input>
        </el-form-item>
        <el-form-item label="作者/来源">
          <el-input v-model="form.author"></el-input>
        </el-form-item>
        <el-form-item label="发布日期">
          <el-date-picker v-model="form.publishDate" type="date" placeholder="选择日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="是否热门">
          <el-radio-group v-model="form.isHot">
            <el-radio :label="0">否</el-radio>
            <el-radio :label="1">是</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="关联楼盘">
          <el-row>
            <el-col :span="4">
              {{form.relationHourseName}}
            </el-col>
            <el-col :span="4">
              <el-button type="primary" @click="clearRelationHourse" title="清除后需保存才能生效">清除关联楼盘</el-button>
            </el-col>
            <el-col :span="4">
              <el-select v-model="form.cityName" placeholder="请选择城市">
                <el-option
                  v-for="item in cities"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-col>
            <el-col :span="12">
              <el-autocomplete
                v-model="selectedHourseName"
                :fetch-suggestions="querySearchcHourse"
                placeholder="请输入名称进行查询"
                @select="handleSelectHourse"
                :trigger-on-focus="false"
              >
                <template slot-scope="{ item }">
                  <span>{{ item.name }}</span>
                </template>
              </el-autocomplete>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="内容">
          <!-- <froala id="edit" :tag="'textarea'" :config="froalaConfig" v-model="form.content"></froala> -->
          <UE :defaultMsg="form.content" :config="ueConfig" ref="ueditor"></UE>
          <!-- <vue-ueditor-wrap v-model="form.content"  ref="ueditor"></vue-ueditor-wrap> -->
        </el-form-item>
      </el-form>
      <el-dialog :visible.sync="dialogImgVisible">
        <img width="100%" :src="dialogImageUrl" alt />
      </el-dialog>
    </div>
  </div>
</template>
<script>
//import VueFroala from "vue-froala-wysiwyg";

import {
  froalaConfig,
  cities,
  propertyTypeOptions
} from "@/constants/constants.js";

import UE from  "../components/ue";
//import VueUeditorWrap from 'vue-ueditor-wrap'

export default {
  //components: {VueUeditorWrap},
  components: {UE},
  data() {
    return {
      froalaConfig: froalaConfig,
      loading: false,
      newsId: "",
      submitLoading: false,
      cities: cities,
      form: {
        id: "",
        title: "",
        author: "",
        publishDate: "",
        content: "",
        isHot: 0,
        cityName:'',
        relationHourseId:'',
        relationHourseName:''
      },
      architecturalTypes: [
        { label: "1", value: "1" },
        { label: "2", value: "2" }
      ],
      content: "",
      fileList: [],
      uploadImgAction: "/api/uploadImage/news",
      dialogImgVisible: false,
      dialogImageUrl: "",
      selectedHourseName:'',
      ueditorContent: '',
      ueConfig: window.UEDITOR_CONFIG
    };
  },
  methods: {
    saveNewsInfo() {
      if(!this.form.title){
        this.$notify({
          title: "提示",
          message: "标题不能为空",
          type: "error"
        });
        return false;
      }
      if(!this.form.publishDate){
        this.$notify({
          title: "提示",
          message: "发布日期不能为空",
          type: "error"
        });
        return false;
      }
      this.form.content = this.$refs.ueditor.editor.getContent();
      this.submitLoading = true;
      this.form.encryptionId = this.newsId;
      this.$http.post("/api/news/save", this.form).then(response => {
        this.newsId = response.data.encryptionId;
        this.form = response.data;
        this.$notify({
          title: "提示",
          message: "保存成功",
          type: "success"
        });
        this.getNewsInfo(this.newsId);
        this.submitLoading = false;
      });
    },
    getNewsInfo(newsId) {
      this.loading = true;
      this.$http.get("/api/news/get/front/" + newsId).then(response => {
        if (response) {
          this.form = response.data;
          this.$refs.ueditor.editor.setContent(this.form.content);
          if (!this.form.isHot) {
            this.form.isHot = 0;
          }
          this.loading = false;
        }
      });
    },
    goBackToList() {
      this.$router.push("/newsList");
    },
    submitUpload() {
      this.$refs.upload.submit();
    },
    handleRemove(file, fileList) {},
    handlePreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    uploadImgSuccess(response, file, fileList) {
      this.$notify({
        title: "提示",
        message: "上传成功",
        type: "success"
      });
      this.fileList = [];
      this.form.titleImgUrl = response;
    },
    handlePictureCardPreview(fileUrl) {
      this.dialogImageUrl = fileUrl;
      this.dialogImgVisible = true;
    },
    querySearchcHourse(queryString, cb) {
      if(!this.form.cityName){
        return false;
      }
      var hourseBaseInfoQuery = {
        cityName: this.form.cityName,
        name: queryString
      };
      this.$http
        .post("/api/hourseBaseInfo/query", hourseBaseInfoQuery)
        .then(response => {
          if (response.data) {
            cb(response.data);
          }
        });
    },
    handleSelectHourse(item) {
        this.form.relationHourseId = item.hourseId;
        this.selectedHourseName = item.name;
    },
    clearRelationHourse(){
      this.selectedHourseName = "";
      this.form.relationHourseId = null;
      this.form.relationHourseName = "";
      this.form.cityName = "";
    }
  },
  created() {
    this.newsId = this.$route.params.newsId;
    if (this.newsId) {
      this.getNewsInfo(this.newsId);
    }
  }
};
</script>
<style>
.hourse-info-label {
  text-align: left;
  vertical-align: middle;
  font-size: 16px;
  font-weight: bold;
  color: #606266;
  box-sizing: border-box;
  margin-bottom: 10px;
}
.el-form-item__label {
  font-size: 14px !important;
  font-weight: bold;
}
.toolBar {
  width: 100%;
  height: 50px;
  padding: 5px;
  border-bottom: 2px solid #ebebeb;
  margin-bottom: 10px;
  text-align: right;
}
.info_link {
  margin-right: 50px;
}
</style>